import { onBeforeUnmount, ref } from 'vue';

/**
 * 主题管理组合式函数
 * 自动检测系统主题并设置相应的CSS变量
 */
export function useTheme() {
  // 主题状态
  const isDark = ref(false);

  // 更新主题颜色
  const updateThemeColors = () => {
    const root = document.documentElement;
    if (isDark.value) {
      root.style.setProperty('--text-color', '#ffffff');
      root.style.setProperty('--user-msg-bg', 'rgba(114, 46, 209, 0.2)');
      root.style.setProperty('--user-msg-border', 'rgba(114, 46, 209, 0.3)');
      root.style.setProperty('--ai-msg-bg', 'rgba(24, 144, 255, 0.15)');
      root.style.setProperty('--ai-msg-border', 'rgba(24, 144, 255, 0.3)');

      // 深色模式下的标签颜色
      root.style.setProperty('--username-color', '#e9afff');
      root.style.setProperty('--username-bg', 'rgba(114, 46, 209, 0.25)');
      root.style.setProperty('--model-tag-color', '#d9f7be');
      root.style.setProperty('--model-tag-bg', 'rgba(255, 255, 255, 0.15)');
      root.style.setProperty('--model-tag-border', 'rgba(255, 255, 255, 0.3)');
      root.style.setProperty('--timestamp-bg', 'rgba(0, 0, 0, 0.2)');
      root.style.setProperty('--timestamp-color', 'rgba(255, 255, 255, 0.8)');

      // 深色模式下的输入框颜色
      root.style.setProperty('--input-bg', 'rgba(0, 0, 0, 0.2)');
      root.style.setProperty('--input-border', 'rgba(255, 255, 255, 0.1)');
      root.style.setProperty('--input-text', '#ffffff');
      root.style.setProperty('--input-container-bg', 'rgba(0, 0, 0, 0.2)');
    } else {
      root.style.setProperty('--text-color', 'rgba(0, 0, 0, 0.85)');
      root.style.setProperty('--user-msg-bg', 'rgba(114, 46, 209, 0.1)');
      root.style.setProperty('--user-msg-border', 'rgba(114, 46, 209, 0.2)');
      root.style.setProperty('--ai-msg-bg', 'rgba(24, 144, 255, 0.1)');
      root.style.setProperty('--ai-msg-border', 'rgba(24, 144, 255, 0.2)');

      // 浅色模式下的标签颜色
      root.style.setProperty('--username-color', '#ffffff');
      root.style.setProperty('--username-bg', 'rgba(114, 46, 209, 0.8)');
      root.style.setProperty('--model-tag-color', '#034d14');
      root.style.setProperty('--model-tag-bg', 'rgba(191, 237, 176, 0.8)');
      root.style.setProperty('--model-tag-border', 'rgba(135, 208, 104, 0.8)');
      root.style.setProperty('--timestamp-bg', 'rgba(0, 0, 0, 0.1)');
      root.style.setProperty('--timestamp-color', 'rgba(0, 0, 0, 0.6)');

      // 浅色模式下的输入框颜色
      root.style.setProperty('--input-bg', '#ffffff');
      root.style.setProperty('--input-border', '#d9d9d9');
      root.style.setProperty('--input-text', 'rgba(0, 0, 0, 0.85)');
      root.style.setProperty(
        '--input-container-bg',
        'rgba(245, 245, 245, 0.8)',
      );
    }
  };

  // 检测当前主题
  const detectTheme = () => {
    // 检查是否有暗色主题的类名或属性
    const htmlElement = document.documentElement;
    const bodyElement = document.body;

    // 检查常见的暗色主题标识
    isDark.value =
      document.querySelector('html[data-theme="dark"]') !== null ||
      document.querySelector('body.dark-theme') !== null ||
      document.querySelector('html.dark') !== null ||
      document.querySelector('body.dark') !== null ||
      document.querySelector('html[theme="dark"]') !== null ||
      bodyElement.classList.contains('dark-mode') ||
      htmlElement.classList.contains('dark-mode') ||
      // 也检查媒体查询
      window.matchMedia('(prefers-color-scheme: dark)').matches;

    updateThemeColors();
  };

  // 设置主题变化的监听器
  const setupThemeWatcher = () => {
    // 初始检测一次主题
    detectTheme();

    // 监听系统主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleThemeChange = () => detectTheme();

    // 监听媒体查询变化
    mediaQuery.addEventListener('change', handleThemeChange);

    // 监听DOM变化，检测主题类的添加或移除
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (
          mutation.type === 'attributes' &&
          (mutation.attributeName === 'class' ||
            mutation.attributeName === 'data-theme')
        ) {
          detectTheme();
          break;
        }
      }
    });

    // 观察html和body元素的变化
    observer.observe(document.documentElement, { attributes: true });
    observer.observe(document.body, { attributes: true });

    // 返回清理函数
    const cleanup = () => {
      mediaQuery.removeEventListener('change', handleThemeChange);
      observer.disconnect();
    };

    return cleanup;
  };

  return {
    isDark,
    setupThemeWatcher: () => {
      const cleanup = setupThemeWatcher();
      onBeforeUnmount(cleanup);
    },
    updateThemeColors,
    detectTheme,
  };
}
